<template>
  <div>
    <!-- <div class="content"> -->
    <el-card class="box-cards">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="管理员名字" prop="rootname">
          <el-input
            v-model="ruleForm.rootname"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <div class="btnDiv">
            <el-button
              type="success"
              class="formBtn"
              @click="submitForm('ruleForm')"
              >登录</el-button
            >

            <el-button
              type="info"
              class="formBtn"
              @click="resetForm('ruleForm')"
              >重置</el-button
            >

            <el-button type="info" class="formBtn" @click="cancel()"
              >返回</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- </div> -->
  </div>
</template>

<script>
import { AdminLogin } from "../api/admin.js";

export default {
  data() {
  

    return {
      ruleForm: {
        pass: "",
        rootname: "",
      },
      rules: {
        pass: [{ required:true,message:"密码不能为空", trigger: "blur" }],
        rootname: [{ required:true,message:"用户名不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      console.log(1);
      this.$refs[formName].validate((valid) => {
        console.log(2);
        if (valid) {
          AdminLogin(this.ruleForm)
            .then(({ data }) => {
              console.log(1);
              let res = data;
              if (res.code === 1000) {
                localStorage.setItem("accessToken", data.data.token);
                localStorage.setItem("refreshToken", data.data.refreshToken);
                var tokenadminid = JSON.stringify(data.data.adminId)
                console.log(data.data);
                localStorage.setItem("adminId",tokenadminid)
                this.$router.push("/adminhome");
              } else {
                this.$message({ type: "error", message: res.ms });
              }
            })
            .catch((err) => {
              console.log(err);
              this.$message({ type: "error", message: err });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.box-cards {
  /* padding: 2rem; */
  width: 40%;
  height: 18.3rem;
  margin-left: 27%;
  margin-top: 10.6%;
  text-align: center;
  padding-right: 3%;
  padding-top: 2%;
  float: left;
}

.btnDiv {
  margin-top: 10%;
}

.formBtn {
  width: 22%;
}
</style>